import { Component, useState } from "react";

class Fahrenheit extends Component {
    render() {
        const { value } = this.props
        let change = (e) => {
            let temper = (Number(e.target.value) - 32) * 5 / 9  // 华氏转换成摄氏，回传给父组件
            onChange(Number(temper))
        }
        return (
            <div>
                <label>华氏温度</label>
                <input type="text" value={value * 9 / 5 + 32} onChange={change} />
            </div>
        )
    }
}

function Celsius(props) {
    let { value, onChange } = props // 接收papa传递来的数据
    let change = (e) => {
        onChange(e.target.value); //调用父组件change方法 // 子传父
    }
    return (
        <div>
            <label>摄氏温度</label>
            <input type="text" value={value} onChange={change} />
        </div>
    )
}

function DemoA() {
    const [temper, setTemper] = useState(0) // temper 被提升的状态
    return (
        <div>
            {/* 父传子 */}
            {/* papa得到son数据val 然后 修改状态，模板重新渲染，son重新渲染，又实现了父传子 */}
            <Fahrenheit value={temper} onChange={val => setTemper(val)}></Fahrenheit>
            <hr />
            <Celsius value={temper} onChange={val => setTemper(val)}></Celsius>
        </div>
    )
}

export default DemoA